
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>NoteGen搭建本地AI知识库 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>NoteGen搭建本地AI知识库 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">NoteGen的核心设计理念和主要特点是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">NoteGen是一款轻量、跨平台的Markdown笔记应用，集成了AI辅助功能。其核心特点包括：轻量设计（安装包仅20MB）、免费无广告、跨平台支持（Mac、Windows、Linux、iOS和Android）、支持多语言（中文、英文和日语）。</div>
          </div>
          <div class="card-source">来源: 文档中「1. 安装与初始设置」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">功能</div>
          <div class="card-question">NoteGen的记录功能支持哪些记录方式？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">功能</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">支持多种记录方式：1）文本：直接输入文字或通过剪贴板助手自动识别剪贴板中的文本；2）截图/图片：粘贴截图或上传图片，自动保存到记录列表；3）文件/链接：上传文件或添加网页链接。还可以使用标签分类记录。</div>
          </div>
          <div class="card-source">来源: 文档中「2. 记录功能」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">功能</div>
          <div class="card-question">Markdown编辑器提供了哪三种编辑模式？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">功能</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">三种编辑模式分别是：1）所见即所得：直接编辑并查看渲染效果；2）即时渲染：实时预览Markdown格式；3）分屏预览：一边编辑一边查看渲染结果。</div>
          </div>
          <div class="card-source">来源: 文档中「3. 写作功能 > Markdown 编辑器」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">NoteGen的AI辅助功能包含哪些具体功能？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">AI辅助功能包括：对话（与AI讨论内容，获取灵感）、续写（自动扩展草稿）、润色（优化句子结构和语言）、翻译（支持多语言翻译）。</div>
          </div>
          <div class="card-source">来源: 文档中「3. 写作功能 > Markdown 编辑器」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">配置</div>
          <div class="card-question">在模型配置中，嵌入模型和重排序模型的作用分别是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">配置</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">嵌入模型：将笔记内容转为向量表示，优化搜索和生成。重排序模型：提升检索结果的相关性。这两个模型主要用于RAG功能。</div>
          </div>
          <div class="card-source">来源: 文档中「4. 模型配置」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">参数</div>
          <div class="card-question">AI模型的温度（temperature）参数如何影响生成内容？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">参数</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">温度参数控制生成内容的创造性，范围为0.0-1.0。较低值更精确，较高值更创意。</div>
          </div>
          <div class="card-source">来源: 文档中「4. 模型配置」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">同步</div>
          <div class="card-question">NoteGen支持哪些同步方式？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">同步</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">支持Github/Gitee私有仓库同步。需要输入仓库地址、配置访问令牌（Personal Access Token）确保具有读写权限，并设置同步目录。</div>
          </div>
          <div class="card-source">来源: 文档中「5. 同步配置」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">NoteGen的自动同步机制是如何工作的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">默认采用延时同步机制，10秒无编辑操作后自动同步。也可选择手动同步或实时同步（需稳定网络）。内容会实时保存到本地。</div>
          </div>
          <div class="card-source">来源: 文档中「5. 同步配置」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">什么是RAG（Retrieval-Augmented Generation）？在NoteGen中如何应用？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">RAG将你的笔记作为知识库，AI可根据笔记内容回答问题或生成内容。需要配置嵌入模型和重排序模型来实现这个功能。</div>
          </div>
          <div class="card-source">来源: 文档中「6. 搭建AI个人知识库」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">功能</div>
          <div class="card-question">Markdown编辑器支持哪些高级格式和功能？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">功能</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">支持大纲、数学公式、脑图、图表、流程图、甘特图、时序图、五线谱、代码高亮、graphviz和plantuml UML图。还支持嵌入音频、视频或语音阅读功能，以及版本控制（历史回滚）。</div>
          </div>
          <div class="card-source">来源: 文档中「3. 写作功能 > Markdown 编辑器」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技巧</div>
          <div class="card-question">使用NoteGen时，如何根据不同任务选择合适的AI模型？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技巧</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">写作润色用高精度模型，创意记录用高创造性模型，翻译用高精度模型，头脑风暴用高创造性模型。</div>
          </div>
          <div class="card-source">来源: 文档中「8. 实用技巧」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">注意事项</div>
          <div class="card-question">使用NoteGen的AI功能和同步功能时有哪些限制？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">注意事项</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">AI功能需要网络连接，离线模式下仅支持本地记录和编辑。实时同步可能消耗更多流量，建议低频使用时选择延时同步。需确保API密钥有效，定期检查模型提供商的配额限制。</div>
          </div>
          <div class="card-source">来源: 文档中「9. 注意事项」部分</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
